import 'package:auto_route/annotations.dart';
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:sonora/bloc/followList/sj_follow_list_bloc.dart';
import 'package:sonora/bloc/followList/sj_follow_list_event.dart';
import 'package:sonora/bloc/followList/sj_follow_list_state.dart';
import 'package:sonora/bloc/mine/sj_mine_bloc.dart';
import 'package:sonora/bloc/mine/sj_mine_event.dart';
import 'package:sonora/bloc/mine/sj_mine_state.dart';
import 'package:sonora/config/sj_app_initial.dart';
import 'package:sonora/models/sj_friend_list_item_data.dart';
import 'package:sonora/shared/lib/constants/sj_colors.dart';
import 'package:sonora/utils/sj_country_utils.dart';
import 'package:sonora/utils/sj_text_style.dart';
import 'package:sonora/views/appbar/sj_appbar.dart';

@RoutePage()
class SjFollowListPage extends StatelessWidget {
  const SjFollowListPage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        extendBodyBehindAppBar: true, // 使内容延伸到导航
        appBar: SjAppbar(
          title: Text(
            'Follow List',
            style: SjTextStyle.customFontBlack20,
          ),
          backgroundColor: Colors.transparent, // 设置导航栏背景为透明
          elevation: 0, // 去除导航栏阴影
          leading: IconButton(
            icon: Image.asset('assets/images/nav_back.png'), // 左侧按钮
            onPressed: () {
              // 处理返回逻辑
              Navigator.of(context).pop();
            },
          ),
        ),
        body: BlocProvider<SjMineBloc>.value(
          value: getit<SjMineBloc>()..add(const SjMineEventLoadedFollowList()),
          child: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/images/post_bg.png'),
                fit: BoxFit.cover,
              ),
            ),
            child: SafeArea(
              child: Container(
                child: Column(children: [
                  Expanded(child: BlocBuilder<SjMineBloc, SjMineState>(
                    builder: (context, state) {
                      return (state.friendList == null ||
                              state.friendList!.isEmpty)
                          ? Image.asset('assets/images/block_list_empty.png')
                          : ListView.builder(
                              padding: EdgeInsets.symmetric(horizontal: 20),
                              shrinkWrap: true,
                              itemBuilder: ((context, index) {
                                final SjFriendListItemData friend =
                                    state.friendList!.elementAt(index);
                                return Padding(
                                  padding: EdgeInsets.only(bottom: 16),
                                  child: Container(
                                    padding:
                                        EdgeInsets.fromLTRB(20, 15, 20, 15),
                                    decoration: BoxDecoration(
                                      color: SjColors.themeAColor,
                                      borderRadius: BorderRadius.all(
                                          Radius.circular(12.0)),
                                    ),
                                    child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceBetween,
                                        children: [
                                          Container(
                                            child: Row(children: [
                                              Container(
                                                width:
                                                    40, // Diameter (2 * radius) = 2 * 15
                                                height:
                                                    40, // Diameter (2 * radius) = 2 * 15
                                                decoration: BoxDecoration(
                                                  shape: BoxShape.circle,
                                                  image: DecorationImage(
                                                    image: NetworkImage(friend
                                                            .avatarUrl ??
                                                        ''), // Replace with your avatar image URL
                                                    fit: BoxFit.cover,
                                                  ),
                                                  border: Border.all(
                                                    color: Colors
                                                        .black, // Border color
                                                    width: 2, // Border width
                                                  ),
                                                  boxShadow: [
                                                    BoxShadow(
                                                      color: SjColors
                                                          .themeColor, // Shadow color and opacity
                                                      offset: Offset(1,
                                                          1), // Shadow offset (x, y)
                                                    ),
                                                  ],
                                                ),
                                              ),
                                              SizedBox(
                                                width: 12,
                                              ),
                                              Column(
                                                crossAxisAlignment: CrossAxisAlignment.start,
                                                children: [
                                                  Text(
                                                    friend.nickname ??
                                                        '',
                                                    style: SjTextStyle
                                                        .customFontBlack16,
                                                  ),
                                                  Text(
                                                    friend.country ?? '',
                                                    style: SjTextStyle.customFontBlack14,
                                                  )
                                                ],
                                              )
                                            ]),
                                          ),
                                          InkWell(
                                            child: Image.asset(
                                                'assets/images/follow_tick_icon.png'),
                                            onTap: () {
                                              context.read<SjMineBloc>().add(
                                                  SjMineEventUnFriend(
                                                      followUserId:
                                                          friend.userId ?? ''));
                                              // getit<SjMineBloc>().add(SjMineEventUnFriend(followUserId: friend.userId ?? ''));
                                            },
                                          )
                                        ]),
                                  ),
                                );
                              }),
                              itemCount: state.friendList?.length);
                    },
                  ))
                ]),
              ),
            ))
        ));
  }
}
